<template>
    <div class="charts">

        <!-- vue-echarts提供全局组件 -->
        <v-chart :option="getOption()" autoresize></v-chart>
        <!-- <v-chart></v-chart> -->
    </div>
</template>
  
<script setup lang="ts">
//ehcarts配置项
const getOption = () => {
    return {
        //x轴
        xAxis: {
            show: false, //隐藏x
            max: 100,
            min: 0,
        },
        yAxis: {
            show: false, //隐藏y
            //y轴上均匀分布
            type: "category",
        },
        series: {
            type: "bar",
            //每个柱状图颜色
            data: [30],
            barWidth: 10,
            //背景颜色
            backgroundStyle: {
                color: '#ddd'
            },
            //柱条的颜色
            showBackground: true,//设置柱条的背景颜色，需要变为真
            itemStyle: {
                color: 'hotpink'
            },
            //显示数值
            label: {
                show: true,
                position: 'right',
                //自定义数值
                formatter: "|",
                color: 'skyblue',
            },
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
    };
};

</script>
  
<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>